<template>
  <div class="project-manager">
    <el-tabs v-model="activeName" style="padding-left: 8px">
      <el-tab-pane label="项目列表" name="first">
        <div class="project-add">
          <addProject v-on:getAllProject="getAllProject"></addProject>
        </div>
        <div>
          <el-row :gutter="24">
            <!--第一个box-->
            <el-col :span="6" v-for="(item,idex) in projectList" :key="idex">
              <div class="grid-content bg-purple">
                <div class="box" @click="setProjectId(item.id, item.name)">
                  <router-link :to="{name:'接口列表'}">
                    <li v-if="item.id%10 === 0" class="box1">
                      <i class="el-icon-s-finance inter-icon"></i>
                    </li>
                    <li v-if="item.id%10 === 1" class="box1 box2">
                      <i class="el-icon-platform-eleme inter-icon"></i>
                    </li>
                    <li v-if="item.id%10 === 2" class="box1 box3">
                      <i class="el-icon-s-data inter-icon"></i>
                    </li>
                    <li v-if="item.id%10 === 3" class="box1 box4">
                      <i class="el-icon-s-unfold inter-icon"></i>
                    </li>
                    <li v-if="item.id%10 === 4" class="box1 box5">
                      <i class="el-icon-s-claim inter-icon"></i>
                    </li>
                    <li v-if="item.id%10 === 5" class="box1 box6">
                      <i class="el-icon-s-cooperation inter-icon"></i>
                    </li>
                    <li v-if="item.id%10 === 6" class="box1 box7">
                      <i class="el-icon-s-release inter-icon"></i>
                    </li>
                    <li v-if="item.id%10 === 7" class="box1 box8">
                      <i class="el-icon-s-opportunity inter-icon"></i>
                    </li>
                    <li v-if="item.id%10 === 8" class="box1 box9">
                      <i class="el-icon-camera-solid inter-icon"></i>
                    </li>
                    <li v-if="item.id%10 === 9" class="box1 box10">
                      <i class="el-icon-video-camera-solid inter-icon"></i>
                    </li>
                    <h1 class="ui-title">{{ item.name }}</h1>
                  </router-link>

                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目描述" name="second">项目描述</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import addProject from './addProject.vue'
import {getProject, deleteProject, createProject} from '@/api/project'

export default {
  name: "index",
  data() {
    return {
      activeName: 'first',
      projectList: [],
      message: '项目管理页面，慧测欢迎您',
    }
  },

  components: {
    addProject
  },

  methods: {
    //获取所有项目
    getAllProject() {
      getProject().then(resp => {
        if (resp.code === 200) {
          this.projectList = resp.data
        }
      })
    },

    //保存项目id和项目名称到store
    setProjectId(projectId, projectName){
      this.$store.commit('SET_PROJECTID', projectId)
      this.$store.commit('SET_PROJECTNAME', projectName)
      console.log(this.$store.state.projectId)
      console.log(this.$store.state.projectName)
    }
  },

  mounted() {
    this.getAllProject()
  }
}
</script>

<style scoped>
.project-manager >>> .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 15px;
}

.project-add {
  height: 45px;
  background-color: #e9eaec;
  margin: 15px;
}

.project-manager .box {
  display: inline-block;
  width: 220px;
  height: 140px;
  margin: 30px 50px;
  text-align: center;
}

.project-manager .box1 {
  display: inline-block;
  width: 120px;
  height: 120px;
  border: 2px solid #f3f3f3;
  text-align: center;
  line-height: 200px;
  font-weight: 700;
  font-size: 24px;
  background: #de8787;
  border-radius: 50%;
}

.project-manager .box2 {
  background: #20a8d8;
}

.project-manager .box3 {
  background: darkseagreen;
}

.project-manager .box4 {
  background: #e09913;
}

.project-manager .box5 {
  background: #ae7dda;
}

.project-manager .box6 {
  background: #f91a77;
}

.project-manager .box7 {
  background: #fb0505;
}

.project-manager .box8 {
  background: #69ee0f;
}

.project-manager .box9 {
  background: rgba(6, 57, 241, 0.97);
}

.project-manager .box10 {
  background: rgb(49, 200, 140);
}

.project-manager .inter-icon {
  font-size: 60px;
  color: #495060;
}

.project-manager .ui-title {
  font-family: YouYuan, serif;
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
  color: #3c3b3b;
  font-weight: 600;
}
</style>
